<template>
  <div>
    <h3>
      <span class="iconfont icon-fenlei1"></span>
      <span>商品列表</span>
      <span @click="goLogin">登录</span>
    </h3>
    <div class="home_container">
      <div class="home_card" v-for="(item,index) in goods" :key="index">
        <img width="100%" :src="item.mainPic" alt />
        <p class="van-multi-ellipsis--l2">{{item.title}}</p>
        <p class="home_price">
          ￥{{item.actualPrice}}
          <span @click="goCart(item.title)" class="iconfont icon-gouwuche"></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
var flag = false;
localStorage.status = JSON.stringify(flag);
export default {
  created() {
    
  },
  mounted() {
    this.$store.dispatch("getData");
  },
  computed: {
    goods: function() {
      return this.$store.state.goods;
    }
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    goCart(name) {
      var status = localStorage.getItem("status");
      console.log(status);
      this.list.push(name);
      if (status) {
        localStorage.cart = JSON.stringify(this.list);
      }
      this.$router.push("/cart");
    },
    goLogin() {
      this.$router.push({
        path: "/Login"
      });
    }
  }
};
</script>

<style scoped>
.home_container {
  width: 100%;
  margin-top: 45px;
  box-sizing: border-box;
  padding: 0px 5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
h3 {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0px;
  left: 0px;
  border-bottom: 1px solid lightgrey;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0px 10px;
}
.home_card {
  width: 48%;
  margin-top: 10px;
  border: 1px solid lightgrey;
}
.home_price {
  width: 100%;
  height: 30px;
  color: red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 5px;
  font-size: 18px;
}
.icon-gouwuche {
  color: grey;
  font-size: 18px;
  margin-right: 5px;
}
</style>